<template>
	<view>
		<!-- <base-notice></base-notice> -->
		<search @result="rs"></search>
		<!-- <tui-icon  @tap="switchList()" :name="isList ? 'manage' : 'listview'" :size="isList ? 22 : 18" :bold="isList ? false : true" color="#333"></tui-icon> -->
		<view class="notification uni-center  is-danger">线下活动推荐</view>
		<view class="tui-product-list">
			<view class="tui-product-container">
				<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 != 0 || isList">
					<!--商品列表-->
					<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
						:hover-start-time="150" @tap="detail(item.id)">
						
						 <view v-if="item.avatarurl!=''">
							 <image :src="item.avatarurl" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"
							  mode="widthFix" />
						 </view>
						 <view v-if="item.avatarurl==''">
						 	<view class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']">
						 		<font-size style="font-size: 13px;">简介：{{ item.intro }}</font-size> 
						 	</view>
						 </view>
						
						<view class="tui-pro-content">
							<view class="tui-pro-tit">公司名称：{{ item.comName }}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">活动类型：{{ item.fee }}</text>
								</view>
								<view class="tui-pro-pay">公司规模：{{ item.pepole }}</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
			<view class="tui-product-container" v-if="!isList">
				<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 == 0">
					<!-- <template is="productItem" data="{{item,index:index}}" /> -->
					<!--商品列表-->
					<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
						:hover-start-time="150" @tap="detail(item.id)">
						<view v-if="item.avatarurl!=''">
													 <image :src="item.avatarurl" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"
													  mode="widthFix" />
						</view>
						<view v-if="item.avatarurl==''">
							<view class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']">
								 <font-size style="font-size: 13px;">简介：1{{ item.intro }}</font-size> 
							</view>
						</view>
						<view class="tui-pro-content">
							<view class="tui-pro-tit">公司名称：{{ item.comName }}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">活动类型：{{ item.fee }}</text>
									<!-- <text class="tui-factory-price">￥{{ item.factory }}</text> -->
								</view>
								<view class="tui-pro-pay">公司规模：{{ item.pepole }}</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn && isList" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	import tui from '@/common/tui'
	import search from 'components/common/search/search.vue'
	export default {
		components: {
			search
		},
		data() {
			return {
				isList: false, //是否以列表展示  | 列表或大图
				productList: [],
				productList3: [{
						intro: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）',
						fee: 599,
						pepole: 2342,
						comName: '蓝翔'
					},
					{
						intro: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						fee: 29,
						pepole: 999,
						comName: '中天置地'
					},
					{
						intro: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						fee: 29,
						pepole: 999,
						comName: '中天置地'
					},
					{
						intro: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						fee: 29,
						pepole: 999,
						comName: '中天置地'
					},
					{
						intro: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
						fee: 29,
						pepole: 999,
						comName: '中天置地'
					}
				],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true
			}
		},
		onLoad(){
			this.getNextRecords()
		},
		methods: {
			detail: function(id) {
				console.log("detail.id"+JSON.stringify(id))
				tt.navigateTo({
					url: '../mall/service-mall-items/service-mall-items?compainId='+id,
					fail(res){
						  console.log(`switchTab调用失败`+JSON.stringify(res));
					}
				});
			},
			switchList: function() {
				this.isList = !this.isList;
			},
			rs:function(rs){
				console.log("rs="+rs)
				this.productList = rs
			},
			getNextRecords(){
				let params={
					pageNo:this.pageIndex,
					pageSize:100
				}
				tui.tGetAction('/campain/campain/proXxbCampain/list', params).then(res => {
					console.log(res)
					if(res.statusCode===200){
						if(res.data.result.total==0){
							this.loadding = false;
							return
						}
						let loadData = JSON.parse(JSON.stringify(res.data.result.records));
						loadData = loadData.splice(0, 10);
						if (this.pageIndex == 1) {
							loadData = loadData.reverse();
						}
						this.productList = this.productList.concat(loadData);
						this.pageIndex = this.pageIndex + 1;
						this.loadding = false;
					}
				})
			}
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 20) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getNextRecords()
			}
		}
	}
</script>

<style>
	/*顶部下拉选择 综合*/


	.tui-attr-item:nth-of-type(3n) {
		margin-right: 0%;
	}

	.tui-attr-btnbox {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		background: #fff;
	}

	.tui-attr-safearea {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-attr-btnbox::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1px solid #eaeef1;
		transform: scaleY(0.5) translateZ(0);
		transform-origin: 0 0;
	}

	.tui-drawer-btn {
		width: 47%;
		text-align: center;
		height: 60rpx;
		border-radius: 30rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.tui-drawerbtn-black {
		border: 1rpx solid #555;
	}

	.tui-drawerbtn-primary {
		background: #e41f19;
		color: #fff;
	}

	/* 商品列表*/

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
		font-size: 10px;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	/* 商品列表*/



	.tui-header-box {
		width: 100%;
		padding: 0 30rpx 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	/* #ifndef MP */
	.tui-header-icon {
		min-width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* #endif */
	/* #ifdef MP */
	.tui-set-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* #endif */
	.tui-icon-box {
		position: relative;
	}

	.tui-icon-setup {
		margin-left: 8rpx;
	}

	.tui-badge {
		position: absolute;
		font-size: 24rpx;
		height: 32rpx;
		min-width: 20rpx;
		padding: 0 6rpx;
		border-radius: 40rpx;
		right: 10rpx;
		top: -5rpx;
		transform: scale(0.8) translateX(60%);
		transform-origin: center center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.tui-badge-red {
		background: #F74D54;
		color: #fff;
	}
</style>
